<template>
    <a-layout>
      <a-layout-sider class="sider-left">
          <ITree ref="itree" :treeData="treeData" @deleteFun="deleteFun" @selectNodeFun="selectNodeFun"  @clickNodeFun="clickNodeFun"></ITree>
      </a-layout-sider>
      <a-layout-content style="padding-left:50px">
           <a-button type="primary" @click="getTreeCheckBoxAll()">获取选中</a-button>
          <lib-doc :libDocData="libDocData"></lib-doc>
      </a-layout-content>
    </a-layout>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { TreeInterFace } from 'wd-platform-library/lib/src/ITree/src/TreeInterFace'
import { ITree } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const itree = ref()
        const treeData = reactive<TreeInterFace<any>>({
            loading: false, // 属性加载状态
            data: [], // 数据源
            operation: [
                {
                    label: '删除', // 按钮名字
                    isShow: true, // 按钮权限控制
                    buttonFun: 'deleteFun', // 按钮回调方法
                    remindData: { // 是否需要弹窗
                        isShow: true,
                        remindTitle: '是否删除',
                        remindContext: '删除后数据将无法恢复'
                    }
                }
            ], // 右侧功能集合
            options: {
                checkable: true, // 是否展示复选框
                checkStrictly: true, // 是否父子关联
                checkedKeys: ['4841740817268745', '4720821918613558'], // 默认选中集合
                defaultExpandAll: true, // 是否默认展开
                replaceFields: { children: 'children', title: 'deptName', key: 'id' } // 配置展示字段
            }
        })
        setTimeout(() => {
            treeData.data = [{ id: '0', parentId: '-1', deptName: '测试机构', deptType: '-1', status: null, disabled: true, children: [{ id: '4841740817268745', parentId: '0', deptName: '测试校区9999', deptType: '1', status: '0' }, { id: '4720821918613558', parentId: '0', deptName: '123', deptType: '1', status: '0' }, { id: '4578431404433408', parentId: '0', deptName: '记录日志校区', deptType: '1', status: '0' }, { id: '4576778915667970', parentId: '0', deptName: '测试校区222', deptType: '1', status: '0' }, { id: '4392012106817540', parentId: '0', deptName: '测试校区5343', deptType: '1', status: '0', children: [{ id: '4392012106817546', parentId: '4392012106817540', deptName: '测试报名点34634', deptType: '2', status: '0' }] }, { id: '4392012106817536', parentId: '0', deptName: '测试校区888', deptType: '1', status: '0' }, { id: '4387502391140372', parentId: '0', deptName: '测试校区777', deptType: '1', status: '0', children: [{ id: '4387502391140376', parentId: '4387502391140372', deptName: '测试报名点555', deptType: '2', status: '0' }] }, { id: '3729462933176329', parentId: '0', deptName: '华北校区', deptType: '1', status: '0' }, { id: '3729055984992260', parentId: '0', deptName: '东北校区', deptType: '1', status: '1' }, { id: '3602695898152964', parentId: '0', deptName: '昌平校区', deptType: '1', status: '0' }, { id: '407223202566111232', parentId: '0', deptName: '朝阳校区', deptType: '1', status: '0' }, { id: '407223154784600064', parentId: '0', deptName: '大兴校区', deptType: '1', status: '0' }, { id: '407223004406218752', parentId: '0', deptName: '渠道部', deptType: '1', status: '0', children: [{ id: '3371428014432292', parentId: '407223004406218752', deptName: '渠道名称', deptType: '2', status: '0' }] }, { id: '407222953739026432', parentId: '0', deptName: '线上咨询部', deptType: '1', status: '0', children: [{ id: '4576778915667975', parentId: '407222953739026432', deptName: '日志报名点', deptType: '2', status: '0' }, { id: '2764846560763915', parentId: '407222953739026432', deptName: '咨询一组2', deptType: '2', status: '0', children: [{ id: '2764846560763920', parentId: '2764846560763915', deptName: '测试工会3', deptType: '3', status: '0' }, { id: '2764846560763917', parentId: '2764846560763915', deptName: '测试咨询一组分组2', deptType: '3', status: '0' }] }] }] }]
        }, 1000)
        const clickNodeFun = (nodeId:string[], data:any) => {
            console.log(nodeId, data)
        }
        const selectNodeFun = (nodeId:string[], data:any) => {
            console.log(nodeId, data)
        }
        const deleteFun = (val:any) => {
            alert(JSON.stringify(val))
        }
        const getTreeCheckBoxAll = () => {
            console.log(itree.value.checkTreeValue())
            alert(itree.value.checkTreeValue())
        }

        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { TreeInterFace } from 'wd-platform-library/lib/src/ITree/src/TreeInterFace'
        import { ITree } from 'wd-platform-library'`
                },
                {
                    label: '创建树Tree对象',
                    type: 'pre',
                    value: `
        const treeData = reactive<TreeInterFace<any>>({
            loading: false, // 加载状态
            //数据源
            // status:1,则出现删除线
            // disabled:true,禁用
            // disableCheckbox:复选框禁选,
            data: dataList, // 数据源
            operation: [
                {
                    label: '删除', // 按钮名字
                    isShow: true, // 按钮权限控制
                    buttonFun: 'deleteFun', // 按钮回调方法
                    width: 48,
                    remindData: { // 是否需要弹窗
                        isShow: true,
                        remindTitle: '是否删除',
                        remindContext: '删除后数据将无法恢复'
                    }
                }
            ], // 右侧功能集合
            options: {
                checkable: true, // 是否展示复选框
                checkStrictly: true, // 是否父子关联
                checkedKeys: [], // 默认选中集合
                defaultExpandAll: true, // 是否默认展开
                replaceFields: { children: 'children', title: 'deptName', key: 'id' } // 配置展示字段
            }
        })`
                },
                {
                    label: '按钮回调',
                    type: 'pre',
                    value: `
    //点击某一行回调
    const clickNodeFun = (nodeId:string[], data:any) => {
            alert(nodeId + '       ' + JSON.stringify(data))
    }
    //选中复选框回调
    const selectNodeFun = (nodeId:string[], data:any) => {
            console.log(nodeId, data)
    }
    //点击功能回调
    const deleteFun = (val:any) => {
            alert(JSON.stringify(val))
    }
    //获取树结构复选框选中的值
    const getTreeCheckBoxAll = () => {
            console.log(itree.value.checkTreeValue())
            alert(itree.value.checkTreeValue())
    }`
                }
            ]
        }
        return {
            getTreeCheckBoxAll,
            deleteFun,
            clickNodeFun,
            selectNodeFun,
            libDocData,
            treeData,
            itree
        }
    },
    components: {
        ITree,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.sider-left {
  width: 220px !important;
  flex: 0 0 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
}
</style>
